<template>
  <div>
    <div id="profileTop">
      <van-row>
        <van-col span="8" id="userHead">
          <img id="userHeadImg" :src="userHead" alt="头像">
        </van-col>
        <van-col span="14" class="mg12">
          <van-row id="username">
            <van-col span="18">{{username}}</van-col>
          </van-row>
          <van-row class="mg06" typt="flex" justify="space-around">
            <van-col span="24">
              <van-tag class="tags" color="#f1f1f1" text-color="#000">{{sex === 'M' ? '男' : '女'}}</van-tag>
              <van-tag class="tags" color="#f1f1f1" text-color="#000">{{schoolName}}</van-tag>
            </van-col>
          </van-row>
        </van-col>
        <van-col @click="$router.push('/index/profileIndex/user');" class="mg20" id="arrow">
          <van-icon name="arrow"/>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="24">
          <van-divider style="margin: 0.1rem;padding: 0"/>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="24">
          <!--          {{msg}}-->
        </van-col>
      </van-row>
    </div>
    <div id="menu">
      <van-cell class="menu" v-for="(item,index) in menu" @click="to(item)" :title="item.name" is-link/>
      <van-cell to="/index/profileIndex/help" class="menu" title="帮助与反馈" is-link/>
<!--      <van-button style="width: 100%;position: fixed;bottom: 45px" loading-type="spinner" :loading="isLoading"-->
<!--                  @click="showActionSheet = true">-->
<!--        退出登录-->
<!--      </van-button>-->
    </div>
    <div>
      <van-action-sheet
          v-model="showActionSheet"
          description="确认退出登录？"
      >
        <div>
          <van-button class="actionSheetBtn" @click="showActionSheet = false">取消</van-button>
          <van-button class="actionSheetBtn" @click="exit">确定</van-button>
        </div>
      </van-action-sheet>
    </div>
  </div>
</template>

<script>
export default {
  name: "Profile",
  data() {
    return {
      menu: [],
      userHead: null,
      username: null,
      schoolName: null,
      sex: null,
      isLoading: false,
      showActionSheet: false
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let info = JSON.parse(localStorage.getItem("loginInfo"));
      this.menu = JSON.parse(localStorage.getItem('menu'));
      this.userHead = info.userHead;
      this.sex = info.sex;
      this.username = info.userName;
      this.schoolName = info.schoolName;
    },
    exit() {
      localStorage.clear();
      this.menu = null;
      this.$router.push('/login');
    },
    to(e) {
      let route = '';
      switch (e.name) {
        case '个人信息':
          route = 'user';
          break;
        case '设置':
          route = 'setting';
          break;
        case '管理员入口':
          route = 'admin';
          break;
        case '申请':
          route = 'apply';
          break;
      }
      let url = '/index/profileIndex/' + route;
      this.$router.push(url);
    }
  },
  watch: {
    $route(to, from) {
      if (to.path === '/index/profileIndex/profile') {
        this.init();
      }
    }
  }
}
</script>

<style scoped>
.actionSheetBtn {
  width: 100%;
  padding: 0;
  border: 0;
}

#menu {
  padding-top: 9px;
}

#profileTop {
  width: 100%;
  height: auto;
  background-color: white;
}

#userHead {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
}

#userHeadImg {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 20%;
}

#username {
  font-weight: bolder;
  /*display: inline-block;*/
}

.tags {
  margin-right: 3px;
}

#arrow {
  color: #b5b5b5;
  float: right;
  padding-right: 1rem;
}

.menu {
  /*margin-bottom: 3px;*/
}
</style>
